﻿
<!--
https://github.com/netnr
https://gitee.com/netnr
https://www.netnr.com
https://zme.ink
-->


<!DOCTYPE html>
<html>
<head>

    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <link rel='shortcut icon' href='/favicon.ico' type='image/x-icon' />


    <title>生成二维码 脚本服务</title>

    <meta name="keywords" content="netnr NET牛人 生成二维码" />
    <meta name="description" content="Script Services 识别二维码" />

</head>
<body>
<link href='https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css' rel='stylesheet' />
<link href='https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css' rel='stylesheet' />
<script src='https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js'></script>
<script src='https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js'></script>
<script src='https://cdn.jsdelivr.net/npm/jzjs@2.0.2/2.0.2/jz.min.js'></script>
<link href='https://cdn.jsdelivr.net/gh/netnr/cdn/libs/netnr-nav/1.1.2/netnrnav.css' rel='stylesheet' />
<script src='https://cdn.jsdelivr.net/gh/netnr/cdn/libs/netnr-nav/1.1.2/netnrnav.js' defer async></script>
        <link href="/css/global.css?v=NAI_hOr6ZSg5NjaPo94olMdf7kAXXyp9gYOiuK69lLE" rel="stylesheet" />
        <script src="/js/global.js?v=-UUx_lkaONxBXMxYH5RB2QtqMLBOuqV077SxjKI08E4"></script>
            <!--导航-->
            <button type="button" class="MenuToggle show-in-mobile btn btn-lg btn-warning ml-3 mt-3">
                <span class="fa fa-align-justify"></span>
            </button>
            <div class="netnrnav horizontal">
                <div class="netnrnav-wrapper">
                    <ul>
                        <li><a href="https://www.netnr.com" class="siteIcon"><img src="/favicon.ico" /> 首页</a></li>
                        <li><a href="https://www.netnr.com/gist/discover" title="代码片段"><span class="fa fa-fw fa-file-code-o"></span> Gist</a></li>
                        <li><a href="https://www.netnr.com/run/discover" title="在线运行代码"><span class="fa fa-fw fa-play"></span> Run</a></li>
                        <li><a href="https://www.netnr.com/doc" title="文档管理"><span class="fa fa-fw fa-book"></span> Doc</a></li>
                        <li><a href="https://www.netnr.com/draw/discover" title="绘制"><span class="fa fa-fw fa-paint-brush"></span> Draw</a></li>
                        <li><a href="/" title="ss.js.org"><span class="fa fa-fw fa-wrench"></span> 服务</a></li>
                        <li style="background-image: radial-gradient(ellipse, white, rgb(227, 248, 240))">
                            <!--标题-->
                                <a href='javascript:location.reload(false)' title="识别二维码">
                                    <svg class="titleicon"><use xlink:href="#qrcode"></use></svg> &#x751F;&#x6210;&#x4E8C;&#x7EF4;&#x7801;
                                </a>
                        </li>
                        <li>
                            <a class="text-muted"><span class="fa fa-fw fa-ellipsis-h"></span></a>
                            <ul>
                                <li><a target="_blank" title="码云" href="https://gitee.com/netnr"><i class="fa fa-fw fa-git"></i> Gitee <sup><i class="fa small fa-external-link"></i></sup></a></li>
                                <li><a target="_blank" title="GitHub" href="https://github.com/netnr"><i class="fa fa-fw fa-github"></i> GitHub <sup><i class="fa small fa-external-link"></i></sup></a></li>
                            </ul>
                        </li>
                    </ul>
                </div>
            </div>
        <div class="min300 mt-3">
            <style>
    textarea.tah {
        height: calc(1.5em + .75rem + 2px);
        min-height: calc(1.5em + .75rem + 2px);
    }
</style>

<div class="container-fluid">
    <div class="row">
        <div class="col-md-6">
            <div class="input-group">
                <div class="input-group-prepend">
                    <span class="input-group-text">生成</span>
                </div>
                <textarea id="txt" class="form-control tah" placeholder="内容：网址、电话、邮箱等"></textarea>
                <div class="input-group-prepend">
                    <button class="btn btn-warning nrBtnConfig">配置</button>
                </div>
            </div>
            <textarea class="form-control mt-3 min300 d-none nrTxtConfig"></textarea>
            <div id="divCodeResult" class="mt-3"></div>
        </div>
        <div class="col-md-6">
            <div class="input-group">
                <div class="input-group-prepend">
                    <span class="input-group-text">识别</span>
                </div>
                <div class="custom-file">
                    <input id="txtFile" type="file" class="custom-file-input" accept="image/*">
                    <label class="custom-file-label" id="pr">选择图片 或 拖拽图片文件 或 Ctrl + V 粘贴图片</label>
                </div>
            </div>
            <textarea class="form-control mt-3 nrResultCode d-none min300"></textarea>
        </div>
    </div>
</div>

<script src='https://cdn.jsdelivr.net/npm/qrcode@1.4.4/build/qrcode.min.js'></script>
<script src='https://cdn.jsdelivr.net/npm/jsqr@1.3.1/dist/jsQR.min.js'></script>


<script>
    var qrc = {
        defaultConfig: {
            errorCorrectionLevel: 'H',
            type: 'image/jpeg',
            quality: 0.3,
            width: 300,
            margin: 2,
            color: {
                dark: "#000000",
                light: "#FFFFFF"
            }
        },
        init: function () {
            $('#txt,.nrTxtConfig').on('input', function () {
                qrc.encode();
            });

            $('.nrBtnConfig').click(function () {
                if ($('.nrTxtConfig').hasClass('d-none')) {
                    $('.nrTxtConfig').removeClass('d-none')
                } else {
                    $('.nrTxtConfig').addClass('d-none')
                }
                if ($('.nrTxtConfig').val() == "") {
                    $('.nrTxtConfig').val(JSON.stringify(qrc.defaultConfig, null, 4));
                }
            });

            //接收
            ss.receiveFiles(function (files) {
                var file = files[0];
                qrc.decode(file);
            }, "#txtFile");
        },
        encode: function () {
            var txt = $('#txt').val();
            var options = qrc.defaultConfig;
            try {
                options = JSON.parse($('.nrTxtConfig').val());
            } catch (e) { }

            QRCode.toDataURL(txt, options, function (err, qrout) {
                if (err) {
                    console.log(err);
                    jz.msg("生成出错");
                } else {
                    var img = new Image();
                    img.src = qrout;
                    img.className = "border";
                    $('#divCodeResult').empty().append(img);
                }
            })
        },
        decode: function (file) {
            var fr = new FileReader();
            fr.readAsDataURL(file);
            fr.onloadend = function (e) {

                qrc.canvas = document.createElement("canvas");

                var img = new Image();
                img.src = e.target.result;
                img.onload = function () {
                    var ctx = qrc.canvas.getContext("2d");
                    qrc.canvas.width = img.width;
                    qrc.canvas.height = img.height;
                    ctx.drawImage(img, 0, 0, img.width, img.height);
                    var imageData = ctx.getImageData(0, 0, img.width, img.height);

                    var code = jsQR(imageData.data, imageData.width, imageData.height, {
                        inversionAttempts: "dontInvert",
                    });
                    if (code) {
                        console.log(code);
                        $('.nrResultCode').removeClass('d-none').val(code.data);
                    } else {
                        jz.msg("识别二维码失败")
                    }
                }
            }
        }
    }

    qrc.init();
</script>

        </div>
            <a href="javascript:ss.toTop();" class="totop" title="返回顶部">ˆ</a>
</body>
</html>
